<template>
  <Row class="adevice-detail" style="margin-bottom:20px;">
    <div class="adevice-detail-content">
      <div class="device-tab-panel-left">
        <Row style="height: 100px;">
          <Col span="12">
            <dl class="basicInfo-block cf">
              <dt class="basicInfo-item name">设备ID&nbsp;:</dt>
              <dd class="basicInfo-item value" style="text-align:right;">
                {{ selectRow.deviceId }}
              </dd>
            </dl>
            <dl class="basicInfo-block cf">
              <dt class="basicInfo-item name">设备位置&nbsp;:</dt>
              <dd class="basicInfo-item value" :title="selectRow.location">
                {{ selectRow.location }}
              </dd>
            </dl>
            <dl class="basicInfo-block cf">
              <dt class="basicInfo-item name">当前状态&nbsp;:</dt>
              <dd class="basicInfo-item value">
                <mTag :state="selectRow.state"></mTag>
              </dd>
            </dl>
          </Col>
          <Col span="12">
            <dl class="basicInfo-block cf">
              <dt class="basicInfo-item name">设备名称&nbsp;:</dt>
              <dd class="basicInfo-item value autocut" :title="selectRow.name">
                {{ selectRow.name }}
              </dd>
            </dl>
            <dl class="basicInfo-block cf">
              <dt class="basicInfo-item name">更新时间&nbsp;:</dt>
              <dd class="basicInfo-item value">
                {{ selectTime }}
              </dd>
            </dl>
            <dl class="basicInfo-block cf">
              <dt class="basicInfo-item name">设备类型&nbsp;:</dt>
              <dd class="basicInfo-item value">
                {{ selectRow.deviceTypeDes }}
              </dd>
            </dl>
          </Col>
        </Row>
        <Table
          height="450"
          :columns="columns"
          :data="tableData"
          border
          :loading="loading"
        ></Table>
      </div>
      <div class="device-tab-panel-right">
        <div class="chart">
          <div class="w1 h1" id="mapone"></div>
        </div>
        <div class="chart">
          <div class="w1 h1" id="maptwo"></div>
        </div>
      </div>
    </div>
  </Row>
</template>

<script>
import mTag from "@/components/m-tag";
import {
  getRealtimeDataList,
  getDeviceParamList,
  getCurDataList,
  getVolDataList,
  getDeviceDetail,
  getDeviceType
} from "@/api";

import format from "@/utils/format";

function getData(arr, num) {
  let res = {},
    otherArr = arr.filter(t => t.type === num);
  res.value = otherArr.map(t => t.value);
  res.name = otherArr.map(t => t.des)[0];
  return res;
}

export default {
  components: { mTag },
  props: {
    row: {
      type: Object,
      default: new Object()
    }
  },

  async mounted() {
    const vm = this;
    vm.selectRow = vm.row;
    await this.getInitialState();
    const row = vm.selectRow,
      id = String(row.deviceId),
      { deviceSeries } = vm.selectRow;

    // await this._getDeviceParams()
    await this._getDeviceDetail();

    if (~deviceSeries.indexOf("8路") || ~deviceSeries.indexOf("4路")) {
      // hardWareType = 245的是探测器
      this._printTanCeQiCurrentCharts();
      this._printTanCeQiTemperatureCharts();
    } else {
      // (deviceSeries.indexOf("106") > -1)
      // 其他的是设备
      this._printUsualCurrentCharts();
      this._printUsualTemperatureCharts();
    }
  },

  data() {
    return {
      selectTime: "",
      deviceType: "-",
      columns: [
        {
          title: "参数名",
          key: "des",
          align: "center"
        },
        {
          title: "实时值",
          align: "center",
          render: (h, params) => {
            return h("span", params.row.value + params.row.unit);
          }
        },
        {
          title: "更新时间",
          key: "createdAt",
          align: "center",
          render: (h, params) => {
            let vm = this;
            let time = params.row.createdAt;
            return h("span", vm.filterTime(time));
          }
        },
        {
          title: "是否正常",
          align: "center",
          render: (h, params) => {
            let state = params.row.state;
            return this.filterState(h, state);
          }
        }
      ],
      tableData: [],
      selectRow: {},
      paramsList: [],
      loading: false,

      chartMap1: "",
      chartMap2: ""
    };
  },
  methods: {
    // 格式化时间
    filterTime(time) {
      return this.moment(time).format("YYYY-MM-DD HH:mm:ss");
    },

    async filterDeviceType(id) {
      if (!id) return false;
      const result = await getDeviceType();
      if (result.code === 200) {
        const findItem = result.data.find(t => t.id === id);
        if (findItem) this.deviceType = findItem.name;
        else this.deviceType = "-";
      } else this.deviceType = "-";
    },

    // 格式化状态
    filterState(h, state) {
      switch (state) {
        case 1:
          return h(
            "Tag",
            {
              props: {
                color: "green"
              }
            },
            "正常"
          );
          break;
        case 2:
          return h(
            "Tag",
            {
              props: {
                color: "yellow"
              }
            },
            "预警"
          );
          break;
        case 3:
          return h(
            "Tag",
            {
              props: {
                color: "red"
              }
            },
            "告警"
          );
          break;
        case 4:
          return h(
            "Tag",
            {
              props: {
                color: "gray"
              }
            },
            "故障"
          );
          break;
        default:
          return h(
            "Tag",
            {
              props: {
                color: "#909399"
              }
            },
            "未知"
          );
          break;
      }
    },

    // 根据设备id获取设备详细信息
    getInitialState() {
      const params = this.$route.params;
      return new Promise(resolve => {
        getDeviceDetail(params.id).then(res => {
          if (res.code === 200) {
            this.selectRow = res.data;

            resolve();
          }
        });
      });
    },

    // 获取参数列表
    async _getDeviceParams() {
      let vm = this;
      let params = {
        deviceId: vm.selectRow.id
      };
      await getDeviceParamList(params).then(res => {
        if (res.code == 200) {
          this.paramsList = res.data;
        }
      });
    },

    _getDeviceDetail() {
      const params = { deviceId: this.selectRow.id };
      const vm = this;
      vm.loading = true;
      getRealtimeDataList(params).then(res => {
        if (res.code === 200) {
          if (res.data.length === 0) {
            this.tableData = [];
            this.loading = false;
            this.selectTime = "";
            return false;
          }
          this.tableData = res.data;
          let newArray = res.data.map(t => t.state);
          // res.data.forEach(t => {
          //   newArray.push(t.state)
          // })

          this.selectTime = this.moment(res.data[0].createdAt).format(
            "YYYY-MM-DD HH:mm:ss"
          );
          setTimeout(() => {
            this.loading = false;
          }, 500);
        } else {
          this.tableData = [];
          setTimeout(() => {
            this.loading = false;
          }, 500);
        }
      });
    },

    // devieId 以9开头的 探测器电流图
    _printTanCeQiCurrentCharts() {
      let vm = this;

      let deviceId = vm.selectRow.id;
      let params = {
        deviceId
      };
      let moment = vm.moment;
      let options = {
        tooltip: {
          trigger: "axis"
        },
        color: [
          "#60acfc",
          "#32d3eb",
          "#5bc49f",
          "#feb64d",
          "#ff7c7c",
          "#9287e7",
          "#668ED6",
          "#B55CBD"
        ],
        legend: {
          data: []
        },
        grid: {
          left: "4%",
          right: "5%",
          bottom: "5%",
          containLabel: true
        },
        xAxis: {
          type: "category",
          boundaryGap: false,
          data: []
        },
        yAxis: {
          name: "mA",
          type: "value"
        },
        series: []
      };

      getCurDataList(params).then(res => {
        if (res.code != 200) return false;
        if (res.data.length == 0) return false;

        let resData = res.data;

        let d1 = getData(resData, 101),
          d2 = getData(resData, 102),
          d3 = getData(resData, 103),
          d4 = getData(resData, 104),
          d5 = getData(resData, 105),
          d6 = getData(resData, 106),
          d7 = getData(resData, 107),
          d8 = getData(resData, 108);

        let t1 = res.data
            .filter(t => t.type === 101)
            .map(t => {
              return moment(t.createdAt).format("HH:mm");
            }),
          t2 = res.data
            .filter(t => t.type === 102)
            .map(t => {
              return moment(t.createdAt).format("HH:mm");
            }),
          t3 = res.data
            .filter(t => t.type === 103)
            .map(t => {
              return moment(t.createdAt).format("HH:mm");
            }),
          t4 = res.data
            .filter(t => t.type === 104)
            .map(t => {
              return moment(t.createdAt).format("HH:mm");
            }),
          t5 = res.data
            .filter(t => t.type === 105)
            .map(t => {
              return moment(t.createdAt).format("HH:mm");
            }),
          t6 = res.data
            .filter(t => t.type === 106)
            .map(t => {
              return moment(t.createdAt).format("HH:mm");
            }),
          t7 = res.data
            .filter(t => t.type === 107)
            .map(t => {
              return moment(t.createdAt).format("HH:mm");
            }),
          t8 = res.data
            .filter(t => t.type === 108)
            .map(t => {
              return moment(t.createdAt).format("HH:mm");
            });

        let arr1 = [],
          arr2 = [],
          arr3 = [],
          arr4 = [],
          arr5 = [],
          arr6 = [],
          arr7 = [],
          arr8 = [];

        let setMap = new Set([
          ...t1,
          ...t2,
          ...t3,
          ...t4,
          ...t5,
          ...t6,
          ...t7,
          ...t8
        ]);
        const newArray = Array.from(setMap).sort();

        if (d1.value.length > 0) {
          newArray.forEach((t, i) => {
            if (t1.indexOf(t) == -1) {
              arr1[i] = null;
            } else {
              arr1[i] = d1.value[t1.indexOf(t)];
            }
          });
          var ser1 = {
            name: d1.name,
            type: "line",
            smooth: true,
            data: arr1,
            connectNulls: true
          };
          options.series.push(ser1);
          options.legend.data.push(d1.name);
        }

        if (d2.value.length > 0) {
          newArray.forEach((t, i) => {
            if (t2.indexOf(t) == -1) {
              arr2[i] = null;
            } else {
              arr2[i] = d2.value[t2.indexOf(t)];
            }
          });
          var ser2 = {
            name: d2.name,
            type: "line",
            smooth: true,
            connectNulls: true,
            data: arr2
          };
          options.series.push(ser2);
          options.legend.data.push(d2.name);
        }

        if (d3.value.length > 0) {
          newArray.forEach((t, i) => {
            if (t3.indexOf(t) == -1) {
              arr3[i] = null;
            } else {
              arr3[i] = d3.value[t3.indexOf(t)];
            }
          });
          var ser3 = {
            name: d3.name,
            type: "line",
            smooth: true,
            connectNulls: true,
            data: arr3
          };
          options.series.push(ser3);
          options.legend.data.push(d3.name);
        }

        if (d4.value.length > 0) {
          newArray.forEach((t, i) => {
            if (t4.indexOf(t) == -1) {
              arr4[i] = null;
            } else {
              arr4[i] = d4.value[t4.indexOf(t)];
            }
          });
          var ser4 = {
            name: d4.name,
            type: "line",
            connectNulls: true,
            smooth: true,
            data: arr4
          };
          options.series.push(ser4);
          options.legend.data.push(d4.name);
        }

        if (d5.value.length > 0) {
          newArray.forEach((t, i) => {
            if (t5.indexOf(t) == -1) {
              arr5[i] = null;
            } else {
              arr5[i] = d5.value[t5.indexOf(t)];
            }
          });
          var ser5 = {
            name: d5.name,
            type: "line",
            connectNulls: true,
            smooth: true,
            data: arr5
          };
          options.series.push(ser5);
          options.legend.data.push(d5.name);
        }

        if (d6.value.length > 0) {
          newArray.forEach((t, i) => {
            if (t6.indexOf(t) == -1) {
              arr6[i] = null;
            } else {
              arr6[i] = d6.value[t6.indexOf(t)];
            }
          });
          var ser6 = {
            name: d6.name,
            type: "line",
            connectNulls: true,
            smooth: true,
            data: arr6
          };
          options.series.push(ser6);
          options.legend.data.push(d6.name);
        }

        if (d7.value.length > 0) {
          newArray.forEach((t, i) => {
            if (t7.indexOf(t) == -1) {
              arr7[i] = null;
            } else {
              arr7[i] = d7.value[t7.indexOf(t)];
            }
          });
          var ser7 = {
            name: d7.name,
            type: "line",
            connectNulls: true,
            smooth: true,
            data: arr7
          };
          options.series.push(ser7);
          options.legend.data.push(d7.name);
        }

        if (d8.value.length > 0) {
          newArray.forEach((t, i) => {
            if (t8.indexOf(t) == -1) {
              arr8[i] = null;
            } else {
              arr8[i] = d8.value[t8.indexOf(t)];
            }
          });
          var ser8 = {
            name: d8.name,
            type: "line",
            connectNulls: true,
            smooth: true,
            data: arr8
          };
          options.series.push(ser8);
          options.legend.data.push(d8.name);
        }

        options.xAxis.data = newArray;

        vm.$nextTick(() => {
          vm.chartMap1 = vm.echarts.init(document.querySelector("#mapone"));
          vm.chartMap1.showLoading({
            text: "加载中ing"
          });
          vm.chartMap1.clear();
          vm.chartMap1.setOption(options, false);
          vm.chartMap1.hideLoading();
        });
      });
    },
    getInitialState() {
      const params = this.$route.params;
      getDeviceDetail(params.id).then(res => {
        if (res.code === 200) {
          this.selectRow = res.data;
          if ("masterId" in res.data && !res.data.masterId) {
            this.isxuni = false;
          } else {
            this.tabCurrentName = "second";
            this.isxuni = true;
          }
        }
      });
    },

    // 普通设备 即device不是以9开始的 电流图
    _printUsualCurrentCharts() {
      const vm = this;

      const deviceId = vm.selectRow.id;
      const moment = vm.moment;
      const params = { deviceId };

      let options = {
        tooltip: {
          trigger: "axis"
        },
        legend: {
          data: []
        },
        grid: {
          left: "4%",
          right: "5%",
          bottom: "5%",
          top: 30,
          containLabel: true
        },
        xAxis: {
          type: "category",
          boundaryGap: false,
          data: ["周一", "周二", "周三", "周四", "周五", "周六", "周日"]
        },
        yAxis: {
          type: "value"
        },
        series: []
      };

      getCurDataList(params).then(res => {
        if (res.code != 200) return false;
        if (res.data.length == 0) return false;

        let ser1 = {
          name: "A相电流(A)",
          type: "line",
          smooth: true,
          data: res.data
            .filter(t => t.type === 12)
            .map(t => t.value)
            .map(t => {
              if (t === "0.0") {
                return 0;
              }
              return t;
            })
        };

        let ser2 = {
          name: "B相电流(A)",
          type: "line",
          smooth: true,
          data: res.data
            .filter(t => t.type === 13)
            .map(t => t.value)
            .map(t => {
              if (t === "0.0") {
                return 0;
              }
              return t;
            })
        };

        let ser3 = {
          name: "C相电流(A)",
          type: "line",
          smooth: true,
          data: res.data
            .filter(t => t.type === 14)
            .map(t => t.value)
            .map(t => {
              if (t === "0.0") {
                return 0;
              }
              return t;
            })
        };

        let ser4 = {
          name: "零线电流(A)",
          type: "line",
          smooth: true,
          data: res.data
            .filter(t => t.type === 15)
            .map(t => t.value)
            .map(t => {
              if (t === "0.0") {
                return 0;
              }
              return t;
            })
        };

        if (ser1.data && ser1.data.length > 0) {
          options.series.push(ser1);
          options.legend.data.push("A相电流(A)");
        }

        if (ser2.data && ser2.data.length > 0) {
          options.series.push(ser2);
          options.legend.data.push("B相电流(A)");
        }

        if (ser3.data && ser3.data.length > 0) {
          options.series.push(ser3);
          options.legend.data.push("C相电流(A)");
        }

        if (ser4.data && ser4.data.length > 0) {
          options.series.push(ser4);
          options.legend.data.push("零线电流(A)");
        }

        if (res.data && res.data.length > 0) {
          const type = res.data[0].type;
          options.xAxis.data = res.data
            .filter(t => t.type === type)
            .map(t => {
              return moment(t.createdAt).format("HH:mm");
            });
        }

        vm.$nextTick(() => {
          vm.chartMap1 = vm.echarts.init(document.querySelector("#mapone"));
          vm.chartMap1.showLoading({
            text: "加载中ing"
          });

          vm.chartMap1.clear();
          vm.chartMap1.setOption(options, true);
          vm.chartMap1.hideLoading();
        });
      });
    },

    // devieId 以9开头的 探测器温度图
    _printTanCeQiTemperatureCharts() {
      let vm = this;

      let deviceId = vm.selectRow.id;
      let moment = vm.moment;
      let params = {
        deviceId
      };
      let options = {
        tooltip: {
          trigger: "axis"
        },
        color: [
          "#60acfc",
          "#32d3eb",
          "#5bc49f",
          "#feb64d",
          "#ff7c7c",
          "#9287e7",
          "#668ED6",
          "#B55CBD"
        ],
        legend: {
          data: []
        },
        grid: {
          left: "4%",
          right: "5%",
          bottom: "5%",
          // top: 30,
          containLabel: true
        },
        xAxis: {
          type: "category",
          boundaryGap: false,
          data: []
        },
        yAxis: {
          name: "℃",
          type: "value"
        },
        series: []
      };

      getVolDataList(params).then(res => {
        if (res.code != 200) return;
        if (res.data.length == 0) return;
        let resData = res.data;
        let d1 = getData(resData, 201),
          d2 = getData(resData, 202),
          d3 = getData(resData, 203),
          d4 = getData(resData, 204),
          d5 = getData(resData, 205),
          d6 = getData(resData, 206),
          d7 = getData(resData, 207),
          d8 = getData(resData, 208);

        if (d1.value.length > 0) {
          let ser1 = {
            name: d1.name,
            type: "line",
            smooth: true,
            data: d1.value
          };
          options.series.push(ser1);
          options.legend.data.push(d1.name);
          let time = res.data
            .filter(t => t.type === 201)
            .map(t => {
              return moment(t.createdAt).format("HH:mm:ss");
            });
          options.xAxis.data = time;
        }

        if (d2.value.length > 0) {
          let ser2 = {
            name: d2.name,
            type: "line",
            smooth: true,
            data: d2.value
          };
          options.series.push(ser2);
          options.legend.data.push(d2.name);
          let time = res.data
            .filter(t => t.type === 202)
            .map(t => {
              return moment(t.createdAt).format("HH:mm:ss");
            });
          options.xAxis.data = time;
        }

        if (d3.value.length > 0) {
          let ser3 = {
            name: d3.name,
            type: "line",
            smooth: true,
            data: d3.value
          };
          options.series.push(ser3);
          options.legend.data.push(d3.name);
          let time = res.data
            .filter(t => t.type === 203)
            .map(t => {
              return moment(t.createdAt).format("HH:mm:ss");
            });
          options.xAxis.data = time;
        }

        if (d4.value.length > 0) {
          let ser4 = {
            name: d4.name,
            type: "line",
            smooth: true,
            data: d4.value
          };
          options.series.push(ser4);
          options.legend.data.push(d4.name);
          let time = res.data
            .filter(t => t.type === 204)
            .map(t => {
              return moment(t.createdAt).format("HH:mm:ss");
            });
          options.xAxis.data = time;
        }

        if (d5.value.length > 0) {
          let ser5 = {
            name: d5.name,
            type: "line",
            smooth: true,
            data: d5.value
          };
          options.series.push(ser5);
          options.legend.data.push(d5.name);
          let time = res.data
            .filter(t => t.type === 205)
            .map(t => {
              return moment(t.createdAt).format("HH:mm:ss");
            });
          options.xAxis.data = time;
        }

        if (d6.value.length > 0) {
          let ser6 = {
            name: d6.name,
            type: "line",
            smooth: true,
            data: d6.value
          };
          options.series.push(ser6);
          options.legend.data.push(d6.name);
          let time = res.data
            .filter(t => t.type === 206)
            .map(t => {
              return moment(t.createdAt).format("HH:mm:ss");
            });
          options.xAxis.data = time;
        }

        if (d7.value.length > 0) {
          let ser7 = {
            name: d7.name,
            type: "line",
            smooth: true,
            data: d7.value
          };
          options.series.push(ser7);
          options.legend.data.push(d7.name);
          let time = res.data
            .filter(t => t.type === 207)
            .map(t => {
              return moment(t.createdAt).format("HH:mm:ss");
            });
          options.xAxis.data = time;
        }

        if (d8.value.length > 0) {
          let ser8 = {
            name: d8.name,
            type: "line",
            smooth: true,
            data: d8.value
          };
          options.series.push(ser8);
          options.legend.data.push(d8.name);
          let time = res.data
            .filter(t => t.type === 208)
            .map(t => {
              return moment(t.createdAt).format("HH:mm:ss");
            });
          options.xAxis.data = time;
        }

        vm.$nextTick(() => {
          vm.chartMap2 = vm.echarts.init(document.querySelector("#maptwo"));
          vm.chartMap2.showLoading({
            text: "加载中ing"
          });
          vm.chartMap2.clear();
          vm.chartMap2.setOption(options, true);
          vm.chartMap2.hideLoading();
        });
      });
    },

    // 普通设备 即device不是以9开始的 温度图
    _printUsualTemperatureCharts() {
      let vm = this;

      let deviceId = vm.selectRow.id;
      let moment = vm.moment;
      let params = {
        deviceId
      };
      let options = {
        tooltip: {
          trigger: "axis"
        },
        legend: {
          data: []
        },
        grid: {
          left: "4%",
          right: "5%",
          bottom: "5%",
          top: 30,
          containLabel: true
        },
        xAxis: {
          type: "category",
          boundaryGap: false,
          data: ["周一", "周二", "周三", "周四", "周五", "周六", "周日"]
        },
        yAxis: {
          type: "value"
        },
        series: []
      };

      getVolDataList(params).then(res => {
        if (res.code != 200) return false;
        if (res.data.length == 0) return false;

        let ser1 = {
          name: "第1路温度(℃)",
          type: "line",
          smooth: true,
          data: res.data
            .filter(t => t.type === 5)
            .map(t => t.value)
            .map(t => {
              if (t === "0.0") {
                return 0;
              }
              return t;
            })
        };

        let ser2 = {
          name: "第2路温度(℃)",
          type: "line",
          smooth: true,
          data: res.data
            .filter(t => t.type === 6)
            .map(t => t.value)
            .map(t => {
              if (t === "0.0") {
                return 0;
              }
              return t;
            })
        };

        let ser3 = {
          name: "第3路温度(℃)",
          type: "line",
          smooth: true,
          data: res.data
            .filter(t => t.type === 7)
            .map(t => t.value)
            .map(t => {
              if (t === "0.0") {
                return 0;
              }
              return t;
            })
        };

        let ser4 = {
          name: "第4路温度(℃)",
          type: "line",
          smooth: true,
          data: res.data
            .filter(t => t.type === 8)
            .map(t => t.value)
            .map(t => {
              if (t === "0.0") {
                return 0;
              }
              return t;
            })
        };

        if (ser1.data && ser1.data.length > 0) {
          options.series.push(ser1);
          options.legend.data.push("第1路温度(℃)");
        }

        if (ser2.data && ser2.data.length > 0) {
          options.series.push(ser2);
          options.legend.data.push("第2路温度(℃)");
        }

        if (ser3.data && ser3.data.length > 0) {
          options.series.push(ser3);
          options.legend.data.push("第3路温度(℃)");
        }

        if (ser4.data && ser4.data.length > 0) {
          options.series.push(ser4);
          options.legend.data.push("第4路温度(℃)");
        }

        if (res.data && res.data.length > 0) {
          const type = res.data[0].type;
          options.xAxis.data = res.data
            .filter(t => t.type === type)
            .map(t => {
              return moment(t.createdAt).format("HH:mm");
            });
        }

        vm.$nextTick(() => {
          vm.chartMap2 = vm.echarts.init(document.querySelector("#maptwo"));
          vm.chartMap2.showLoading({
            text: "加载中ing"
          });
          vm.chartMap2.clear();
          vm.chartMap2.setOption(options, true);
          vm.chartMap2.hideLoading();
        });
      });
    }
  }
};
</script>
